<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="style.css" media="all">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
	<script src="../code/jquery.slippy.js"></script>
</head>
<body>
	<h1>jQuery Slippy Demos</h1>
	<section id="simple">
		<h3>Basic usage</h3>
		<p>The simplest way to use Slippy</p>
		<p>Code:</p>
		<code>
			jQuery('li').slippy();
		</code>
		<p>Demo:</p>
		<ul>
			<li>First</li>
			<li>Second</li>
			<li>Third</li>
		</ul>
	</section>
	<script>$('#simple li').slippy();</script>

	<section id="duration">
		<h3>Animation Duration</h3>
		<p>Adjust the duration in milliseconds of the animations.</p>
		<p>Code:</p>
		<code>
			jQuery('li').slippy({ enter_duration: 1000, exit_duration:1000 });
		</code>
		<p>Demo:</p>
		<ul>
			<li>First</li>
			<li>Second</li>
			<li>Third</li>
		</ul>
	</section>
	<script>$('#duration li').slippy({ enter_duration: 1000, exit_duration:1000 });</script>

	<section id="background-color">
		<h3>Background Color</h3>
		<p>Adjust the background color.</p>
		<p>Code:</p>
		<code>
			jQuery('li').slippy({ background:'lime' });
		</code>
		<p>Demo:</p>
		<ul>
			<li>First</li>
			<li>Second</li>
			<li>Third</li>
		</ul>
	</section>
	<script>$('#background-color li').slippy({ background:'lime' });</script>


	<section id="background-image">
		<h3>Background Image</h3>
		<p>Use a background image instead of a color.</p>
		<p>Code:</p>
		<code>
			jQuery('li').slippy({ background:'url(bg.jpg)' });
		</code>
		<p>Demo:</p>
		<ul>
			<li>First</li>
			<li>Second</li>
			<li>Third</li>
		</ul>
	</section>
	<script>$('#background-image li').slippy({ background:'url(bg.jpg)' });</script>

	<section id="css-background">
		<h3>Use custom CSS for background</h3>
		<p>Instruct Slippy not to render the background styles, and use custom CSS instead.</p>
		
		<p>JavaScript Code</p>
		<code>
			jQuery('li').slippy({ background:null });
		</code>
		<p>CSS Code</p>
		<code>
			.slippy_bg  { background:'url(bg.jpg)' }
		</code>
		<p>Demo:</p>
		<ul>
			<li>First</li>
			<li>Second</li>
			<li>Third</li>
		</ul>
	</section>
	<script>$('#css-background li').slippy({ background:null });</script>

	<section id="events">
		<h3>API Events</h3>
		<p>Use events to interact with the animations.</p>
		
		<p>Code:</p>
		<code style="display:block"><pre>jQuery('li').slippy(
{ 
	background:'black'
	,OnAnimatingIn: function(e)
	{
		$(this).css('color','white')
	}
	,OnAnimatedIn: function(e)
	{
		$(this).parent().css('border-color','2px solid red')
	}
	,OnAnimatingOut: function(e)
	{
		$(this).parent().css('border','2px solid white')
	}				
	,OnAnimatedOut: function(e)
	{
		$(this).css('color','black')
	} 
});</pre></code>
		<p>Demo:</p>
		<ul>
			<li>First</li>
			<li>Second</li>
			<li>Third</li>
		</ul>
	</section>
	<script>$('#events li').slippy(
			{ 
				background:'black'
				,OnAnimatingIn: function(e)
				{
					$(this).css('color','white')
				}
				,OnAnimatedIn: function(e)
				{
					$(this).parent().css('border','2px solid red')
				}
				,OnAnimatingOut: function(e)
				{
					$(this).parent().css('border','2px solid white')
				}				
				,OnAnimatedOut: function(e)
				{
					$(this).css('color','black')
				} 
			});
	</script>

	<section id="easing">
		<h3>Transition Easing</h3>
		<p>Adjust the easing the animations use (requires jQuery UI).</p>
		<p>Code:</p>
		<code>
			jQuery('li').slippy({ enter_easing:'easeOutElastic', exit_easing:'easeInElastic' });
		</code>
		<p>Demo:</p>
		<ul>
			<li>First</li>
			<li>Second</li>
			<li>Third</li>
		</ul>
	</section>
	<script>$('#easing li').slippy({ enter_duration: 600, enter_easing:'easeOutElastic', exit_duration: 400, exit_easing:'easeInElastic' });</script>

	<section id="manual">
		<h3>Manual Control</h3>
		<p>Control Slippy manually, (e.g. from external code);</p>
		<p>Code:</p>
		<code><pre>jQuery('li').slippy();

jQuery('#intop').click( function () { $('li').slippy('in top'); } )
jQuery('#inright').click( function () { $('li').slippy('in right'); } )
jQuery('#inbottom').click( function () { $('li').slippy('in bottom'); } )
jQuery('#inleft').click( function () { $('li').slippy('in left'); } )

jQuery('#outtop').click( function () { $('li').slippy('out top'); } )
jQuery('#outright').click( function () { $('li').slippy('out right'); } )
jQuery('#outbottom').click( function () { $('li').slippy('out bottom'); } )
jQuery('#outleft').click( function () { $('li').slippy('out left'); } )</pre></code>
		<p>Demo:</p>
		<ul>
			<li>First</li>
			<li>Second</li>
			<li>Third</li>
		</ul>
		<button id="intop">In from top</button>
		<button id="inright">In from right</button>
		<button id="inbottom">In from bottom</button>
		<button id="inleft">In from left</button>
		<br/>
		<button id="outtop">Out to top</button>
		<button id="outright">Out to right</button>
		<button id="outbottom">Out to bottom</button>
		<button id="outleft">Out to left</button>

	</section>
	<script>
			jQuery('li').slippy();

			jQuery('#intop').click( function () { $('#manual li').slippy('in top'); } )
			jQuery('#inright').click( function () { $('#manual li').slippy('in right'); } )
			jQuery('#inbottom').click( function () { $('#manual li').slippy('in bottom'); } )
			jQuery('#inleft').click( function () { $('#manual li').slippy('in left'); } )

			jQuery('#outtop').click( function () { $('#manual li').slippy('out top'); } )
			jQuery('#outright').click( function () { $('#manual li').slippy('out right'); } )
			jQuery('#outbottom').click( function () { $('#manual li').slippy('out bottom'); } )
			jQuery('#outleft').click( function () { $('#manual li').slippy('out left'); } )
	</script>

</body>
</html>